<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/spxq.css">
</head>
<body>
    <div class="Head">
        <a href="shouye.html">返回购物</a>
        <div class="Head-cont">
            <div class="cont">
                <div class="left">
                    <a href="dengluzhuce.html">登录</a>
                    <a href="dengluzhuce.html">注册</a>
                </div>
                <div class="welcom">您好，欢迎来到银座网！</div>
                <ul>
                    <li>我的订单</li>
                    <li><a href="">我的银座
                        <div class="cc">
                            <div class="a1"><a href="">我的订单</a></div>
                            <div class="a1"><a href="">我的订单</a></div>
                            <div class="a1"><a href="">我的订单</a></div>
                        </div>
                    </a></li>
                    <li>帮助中心</li>
                    <li>掌上银座
                        <div class="qq">
                            <img src="images/zsyz.png" alt="">
                        </div>
                    </li>
                    <li>联系客服</li>
                </ul>
            </div>
        </div>
    </div>


    <div class="Search">
        <img src="images/logo.jpg" alt="">
        <div class="form">
            <form action="">
                <input type="text" class="search">
                <input type="submit" class="btn" value="搜索">
            </form>
            <div class="hot-search">
                <p>热门搜索：</p>
                <ul>
                    <li><a href="" class="red">乳液面霜</a></li>
                    <li><a href="">牛奶</a></li>
                    <li><a href="" class="red">面膜</a></li>
                    <li><a href="">手机专卖</a></li>
                    <li><a href="" class="red">应季好物</a></li>
                    <li><a href="">香水香氛</a></li>
                    <li><a href="" class="red">纸品</a></li>
                    <li><a href="">粮油调味</a></li>
                    <li><a href="" class="red">遥控玩具</a></li>
                </ul>
            </div>
        </div>
    </div>



<div class="nav">
    <div class="nav-box">
        <div class="nav-cont">

            <div class="left">
                    <h2>全部商品分类
                    </h2>
                    <!-- ul -->
                <div class="left-cont">
                        <!-- li -->
                    <div class="item">
                            <div class="itemm">
                                <span>
                                    <h3>食品饮料
                                        <b></b>
                                    </h3>
                                    <s></s>
                                </span>
    
                        <div class="con">
                                <a href="">粮食调味</a>
                                <a href="">休闲食品</a>
                                <a href="">进口食品</a>
                                <a href="">饮料冲调</a>
                                <a href="">茗茶</a>
                                <a href="">酒类</a>
                            </div>
                            </div>
                        <!-- li -->
                        <div class="i-mc">
                            <ul class="box1">
                             <li class="subitem">
                                 <div class="sub-hd">粮油调味</div>
                                 <p class="subitem-cat">
                                     <a href="">米面杂粮</a>
                                     <a href="">食用油</a>
                                     <a href="">调味品</a>
                                     <a href="">南北干货</a>
                                     <a href="">方便食品</a>
                                 </p>
                             </li>

                             <li class="subitem">
                                <div class="sub-hd">粮油调味</div>
                                <p class="subitem-cat">
                                    <a href="">米面杂粮</a>
                                    <a href="">食用油</a>
                                    <a href="">调味品</a>
                                    <a href="">南北干货</a>
                                    <a href="">方便食品</a>
                                </p>
                            </li>

                            <li class="subitem">
                                <div class="sub-hd">粮油调味</div>
                                <p class="subitem-cat">
                                    <a href="">米面杂粮</a>
                                    <a href="">食用油</a>
                                    <a href="">调味品</a>
                                    <a href="">南北干货</a>
                                    <a href="">方便食品</a>
                                </p>
                            </li>


                            <li class="subitem">
                                <div class="sub-hd">粮油调味</div>
                                <p class="subitem-cat">
                                    <a href="">米面杂粮</a>
                                    <a href="">食用油</a>
                                    <a href="">调味品</a>
                                    <a href="">南北干货</a>
                                    <a href="">方便食品</a>
                                </p>
                            </li>

                            <li class="subitem">
                                <div class="sub-hd">粮油调味</div>
                                <p class="subitem-cat">
                                    <a href="">米面杂粮</a>
                                    <a href="">食用油</a>
                                    <a href="">调味品</a>
                                    <a href="">南北干货</a>
                                    <a href="">方便食品</a>
                                </p>
                            </li>

                            <li class="subitem">
                                <div class="sub-hd">粮油调味</div>
                                <p class="subitem-cat">
                                    <a href="">米面杂粮</a>
                                    <a href="">食用油</a>
                                    <a href="">调味品</a>
                                    <a href="">南北干货</a>
                                    <a href="">方便食品</a>
                                </p>
                            </li>
                            </ul>
                            <ul class="box2">
                                <li>
                                    <div class="subitem-title">促销活动</div>
                                    <div class="hd-bj">
                                        <p><img src="http://www.yinzuo100.com/data/dateimg/two_page_category_1599118101.jpg" alt=""></p>
                                    </div>
                                    <div class="hd-bottom">
                                        
                                    </div>
                                </li>
                            </ul>
                        </div>
                        </div>

                        <div class="item">
                            <span>
                                <h3>美妆个护</h3>
                                <s></s>
                            </span>

                    <div class="con">
                            <a href="">面部护肤</a>
                            <a href="">香水彩妆</a>
                            <a href="">洗发护发</a>
                            <a href="">身体护理</a>
                            <a href="">口腔护理</a>
                            <a href="">女性护理</a>
                        </div>      
                        <div class="i-mc">
                            <ul class="box1">
                             <li class="subitem">
                                 <div class="sub-hd">哈哈哈</div>
                                 <p class="subitem-cat">
                                     <a href="">米面杂粮</a>
                                     <a href="">食用油</a>
                                     <a href="">调味品</a>
                                     <a href="">南北干货</a>
                                     <a href="">方便食品</a>
                                 </p>
                             </li>

                             <li class="subitem">
                                <div class="sub-hd">粮油调味</div>
                                <p class="subitem-cat">
                                    <a href="">米面杂粮</a>
                                    <a href="">食用油</a>
                                    <a href="">调味品</a>
                                    <a href="">南北干货</a>
                                    <a href="">方便食品</a>
                                </p>
                            </li>

                            <li class="subitem">
                                <div class="sub-hd">粮油调味</div>
                                <p class="subitem-cat">
                                    <a href="">米面杂粮</a>
                                    <a href="">食用油</a>
                                    <a href="">调味品</a>
                                    <a href="">南北干货</a>
                                    <a href="">方便食品</a>
                                </p>
                            </li>


                            <li class="subitem">
                                <div class="sub-hd">粮油调味</div>
                                <p class="subitem-cat">
                                    <a href="">米面杂粮</a>
                                    <a href="">食用油</a>
                                    <a href="">调味品</a>
                                    <a href="">南北干货</a>
                                    <a href="">方便食品</a>
                                </p>
                            </li>

                            <li class="subitem">
                                <div class="sub-hd">粮油调味</div>
                                <p class="subitem-cat">
                                    <a href="">米面杂粮</a>
                                    <a href="">食用油</a>
                                    <a href="">调味品</a>
                                    <a href="">南北干货</a>
                                    <a href="">方便食品</a>
                                </p>
                            </li>

                            <li class="subitem">
                                <div class="sub-hd">粮油调味</div>
                                <p class="subitem-cat">
                                    <a href="">米面杂粮</a>
                                    <a href="">食用油</a>
                                    <a href="">调味品</a>
                                    <a href="">南北干货</a>
                                    <a href="">方便食品</a>
                                </p>
                            </li>
                            </ul>
                            <ul class="box2">
                                <li>
                                    <div class="subitem-title">促销活动</div>
                                    <div class="hd-bj">
                                        <p><img src="http://www.yinzuo100.com/data/dateimg/two_page_category_1599118101.jpg" alt=""></p>
                                    </div>
                                    <div class="hd-bottom">
                                        
                                    </div>
                                </li>
                            </ul>
                        </div>
                        </div>

                        <div class="item">
                            <span>
                                <h3>母婴/玩具乐器</h3>
                                <s></s>
                            </span>

                    <div class="con">
                            <a href="">奶粉</a>
                            <a href="">尿裤湿巾</a>
                            <a href="">喂养用品</a>
                            <a href="">洗护用品</a>
                            <a href="">玩具乐器</a>
                            <a href="">童车童床</a>
                        </div>
                        <div class="i-mc">
                            <ul class="box1">
                             <li class="subitem">
                                 <div class="sub-hd">嗯嗯额</div>
                                 <p class="subitem-cat">
                                     <a href="">米面杂粮</a>
                                     <a href="">食用油</a>
                                     <a href="">调味品</a>
                                     <a href="">南北干货</a>
                                     <a href="">方便食品</a>
                                 </p>
                             </li>

                             <li class="subitem">
                                <div class="sub-hd">粮油调味</div>
                                <p class="subitem-cat">
                                    <a href="">米面杂粮</a>
                                    <a href="">食用油</a>
                                    <a href="">调味品</a>
                                    <a href="">南北干货</a>
                                    <a href="">方便食品</a>
                                </p>
                            </li>

                            <li class="subitem">
                                <div class="sub-hd">粮油调味</div>
                                <p class="subitem-cat">
                                    <a href="">米面杂粮</a>
                                    <a href="">食用油</a>
                                    <a href="">调味品</a>
                                    <a href="">南北干货</a>
                                    <a href="">方便食品</a>
                                </p>
                            </li>


                            <li class="subitem">
                                <div class="sub-hd">粮油调味</div>
                                <p class="subitem-cat">
                                    <a href="">米面杂粮</a>
                                    <a href="">食用油</a>
                                    <a href="">调味品</a>
                                    <a href="">南北干货</a>
                                    <a href="">方便食品</a>
                                </p>
                            </li>

                            <li class="subitem">
                                <div class="sub-hd">粮油调味</div>
                                <p class="subitem-cat">
                                    <a href="">米面杂粮</a>
                                    <a href="">食用油</a>
                                    <a href="">调味品</a>
                                    <a href="">南北干货</a>
                                    <a href="">方便食品</a>
                                </p>
                            </li>

                            <li class="subitem">
                                <div class="sub-hd">粮油调味</div>
                                <p class="subitem-cat">
                                    <a href="">米面杂粮</a>
                                    <a href="">食用油</a>
                                    <a href="">调味品</a>
                                    <a href="">南北干货</a>
                                    <a href="">方便食品</a>
                                </p>
                            </li>
                            </ul>
                            <ul class="box2">
                                <li>
                                    <div class="subitem-title">促销活动</div>
                                    <div class="hd-bj">
                                        <p><img src="http://www.yinzuo100.com/data/dateimg/two_page_category_1599118101.jpg" alt=""></p>
                                    </div>
                                    <div class="hd-bottom">
                                        
                                    </div>
                                </li>
                            </ul>
                        </div>      
                        </div>

                        <div class="item">
                            <span>
                                <h3>家用电器/手机</h3>
                                <s></s>
                            </span>

                    <div class="con">
                            <a href="">大家电</a>
                            <a href="">厨卫大电</a>
                            <a href="">厨房小电</a>
                            <a href="">生活电器</a>
                            <a href="">手机通讯</a>
                            <a href="">手机配件</a>
                        </div>    
                        <div class="i-mc">
                            <ul class="box1">
                             <li class="subitem">
                                 <div class="sub-hd">哎哎哎</div>
                                 <p class="subitem-cat">
                                     <a href="">米面杂粮</a>
                                     <a href="">食用油</a>
                                     <a href="">调味品</a>
                                     <a href="">南北干货</a>
                                     <a href="">方便食品</a>
                                 </p>
                             </li>

                             <li class="subitem">
                                <div class="sub-hd">粮油调味</div>
                                <p class="subitem-cat">
                                    <a href="">米面杂粮</a>
                                    <a href="">食用油</a>
                                    <a href="">调味品</a>
                                    <a href="">南北干货</a>
                                    <a href="">方便食品</a>
                                </p>
                            </li>

                            <li class="subitem">
                                <div class="sub-hd">粮油调味</div>
                                <p class="subitem-cat">
                                    <a href="">米面杂粮</a>
                                    <a href="">食用油</a>
                                    <a href="">调味品</a>
                                    <a href="">南北干货</a>
                                    <a href="">方便食品</a>
                                </p>
                            </li>


                            <li class="subitem">
                                <div class="sub-hd">粮油调味</div>
                                <p class="subitem-cat">
                                    <a href="">米面杂粮</a>
                                    <a href="">食用油</a>
                                    <a href="">调味品</a>
                                    <a href="">南北干货</a>
                                    <a href="">方便食品</a>
                                </p>
                            </li>

                            <li class="subitem">
                                <div class="sub-hd">粮油调味</div>
                                <p class="subitem-cat">
                                    <a href="">米面杂粮</a>
                                    <a href="">食用油</a>
                                    <a href="">调味品</a>
                                    <a href="">南北干货</a>
                                    <a href="">方便食品</a>
                                </p>
                            </li>

                            <li class="subitem">
                                <div class="sub-hd">粮油调味</div>
                                <p class="subitem-cat">
                                    <a href="">米面杂粮</a>
                                    <a href="">食用油</a>
                                    <a href="">调味品</a>
                                    <a href="">南北干货</a>
                                    <a href="">方便食品</a>
                                </p>
                            </li>
                            </ul>
                            <ul class="box2">
                                <li>
                                    <div class="subitem-title">促销活动</div>
                                    <div class="hd-bj">
                                        <p><img src="http://www.yinzuo100.com/data/dateimg/two_page_category_1599118101.jpg" alt=""></p>
                                    </div>
                                    <div class="hd-bottom">
                                        
                                    </div>
                                </li>
                            </ul>
                        </div>  
                        </div>

                        
                        <div class="item">
                            <span>
                                <h3>家居家纺/厨具</h3>
                                <s></s>
                            </span>

                    <div class="con">
                            <a href="">厨具用品</a>
                            <a href="">家庭家纺</a>
                            <a href="">家庭清洁</a>
                            <a href="">烹饪用品</a>
                            <a href="">茶具用品</a>
                            <a href="">床上用品</a>
                        </div>   
                        <div class="i-mc">
                            <ul class="box1">
                             <li class="subitem">
                                 <div class="sub-hd">去去去</div>
                                 <p class="subitem-cat">
                                     <a href="">米面杂粮</a>
                                     <a href="">食用油</a>
                                     <a href="">调味品</a>
                                     <a href="">南北干货</a>
                                     <a href="">方便食品</a>
                                 </p>
                             </li>

                             <li class="subitem">
                                <div class="sub-hd">粮油调味</div>
                                <p class="subitem-cat">
                                    <a href="">米面杂粮</a>
                                    <a href="">食用油</a>
                                    <a href="">调味品</a>
                                    <a href="">南北干货</a>
                                    <a href="">方便食品</a>
                                </p>
                            </li>

                            <li class="subitem">
                                <div class="sub-hd">粮油调味</div>
                                <p class="subitem-cat">
                                    <a href="">米面杂粮</a>
                                    <a href="">食用油</a>
                                    <a href="">调味品</a>
                                    <a href="">南北干货</a>
                                    <a href="">方便食品</a>
                                </p>
                            </li>


                            <li class="subitem">
                                <div class="sub-hd">粮油调味</div>
                                <p class="subitem-cat">
                                    <a href="">米面杂粮</a>
                                    <a href="">食用油</a>
                                    <a href="">调味品</a>
                                    <a href="">南北干货</a>
                                    <a href="">方便食品</a>
                                </p>
                            </li>

                            <li class="subitem">
                                <div class="sub-hd">粮油调味</div>
                                <p class="subitem-cat">
                                    <a href="">米面杂粮</a>
                                    <a href="">食用油</a>
                                    <a href="">调味品</a>
                                    <a href="">南北干货</a>
                                    <a href="">方便食品</a>
                                </p>
                            </li>

                            <li class="subitem">
                                <div class="sub-hd">粮油调味</div>
                                <p class="subitem-cat">
                                    <a href="">米面杂粮</a>
                                    <a href="">食用油</a>
                                    <a href="">调味品</a>
                                    <a href="">南北干货</a>
                                    <a href="">方便食品</a>
                                </p>
                            </li>
                            </ul>
                            <ul class="box2">
                                <li>
                                    <div class="subitem-title">促销活动</div>
                                    <div class="hd-bj">
                                        <p><img src="http://www.yinzuo100.com/data/dateimg/two_page_category_1599118101.jpg" alt=""></p>
                                    </div>
                                    <div class="hd-bottom">
                                        
                                    </div>
                                </li>
                            </ul>
                        </div>   
                        </div>

                        <div class="extra">
                            <a href="">全部商品分类<b>&gt;&gt;</b></a>
                        </div>
                    </div>
                </div>

                <div class="right">
                    <ul>
                        <li><a href="">首页</a></li>
                        <li><a href="">优质商家</a></li>
                        <li><a href="">银座优选</a></li>
                        <li><a href="">银座贵宾卡</a></li>
                        <li><a href="">康妆专区</a></li>
                    </ul>
                </div>
                <div class="last">
                    <dt class="car">
                        <a href=""><strong>0</strong> 件</a>
                    </dt>
                    <dt class="jiesuan"><a href="">去结算</a></dt>
                </div>

            </div>
            </div>
        </div>

        <div class="wrap">
            <script src="jquery.2.2.4.js"></script>
            <script>
                 $.ajax({
        url:"http://localhost:3000/api",
        data:{ type:"goods"},
        success:res=>{
            let i;
            res.some((item,idx) => {
                i=idx;      
                 return item.goodsId === location.search.split("=")[1];
                });
                console.log(res[i]);
                $(".wrap").html(` <div class="neirong">
                    <div class="left">
                    <div class="s-box">
                        <img src="${res[i].url}" alt="">
                        <span></span>
                        <p></p></div>
                    <div class="b-box">
                        <img src="${res[i].url}" alt=""></div>
                    
                </div>
                <div class="right">
                    <div class="head-box">
                    <h1>${res[i].name}</h1>
                </div>
                <div class="right-cont">
                    <div class="right-list">
                        <ul class="sc">
                        <li>
                            <label>
                                商
                         <b class="char1"></b>
                                城
                        <b class="char1"></b>
                                价
                            </label>
                            <span class="mail">${res[i].price}</span>
                        </li>
    
                        <li class="line">
                        <label>用户评价</label>
                        <div class="star">
                            <img src="http://www.yinzuo100.com/themes/xhm_ver2/images/ng_star_red.jpg">
                            <img src="http://www.yinzuo100.com/themes/xhm_ver2/images/ng_star_red.jpg">
                            <img src="http://www.yinzuo100.com/themes/xhm_ver2/images/ng_star_red.jpg">
                            <img src="http://www.yinzuo100.com/themes/xhm_ver2/images/ng_star_red.jpg">
                            <img src="http://www.yinzuo100.com/themes/xhm_ver2/images/ng_star_red.jpg">
                        </div>
                        </li>
                        <li>
                            <label>特色服务：</label>
                            <div class="sales">
                                <img src="http://www.yinzuo100.com/themes/xhm_ver2/images/lab_gray.gif" alt="">
                            </div>
                        </li>
                        <li>
                        
                            <div class="s-btn">
                                <a href="gouwuche.html?id=${res[i].goodsId}">
                            <input type="button" value="加入购物车" class="add">
                            <input type="button" value="加关注" class="modify">
                            </a>
                            </div>
                        </li>
                        </ul>
                    </div>
                </div>
                </div>
                </div>
                    `);
                    new neirong();
            },
            dataType:"json"
    })


    class neirong{
            constructor(){
                //选择器
                this.sbox=document.querySelector(".s-box")
                this.span=document.querySelector(".s-box span")
                this.bbox=document.querySelector(".b-box")
                this.bimg=document.querySelector(".b-box img")

                this.sbw=this.sbox.offsetWidth
                this.sbh=this.sbox.offsetHeight
                //事件执行
                this.addevent()
            }
        
        //绑定事件
        addevent(){
            var that=this
            //鼠标移入事件
            this.sbox.onmouseover=function(){
                that.bbox.style.display="block"
                that.span.style.display="block"

                //span等的布局
                that.init()
            }

            //移出事件
            this.sbox.onmouseout=function(){
                that.bbox.style.display="none"
                that.span.style.display="none"
            }

            //滑动事件
            this.sbox.onmousemove=function(eve){
                var e=eve||window.event

                that.move(e)
            }
        }
        move(e){
            
            var l=e.offsetX-(this.span.offsetWidth/2)
            var t=e.offsetY-(this.span.offsetHeight/2)
            //设置边界限定
           if(l<0) l=0;
           if(t<0) t=0;
           if(l>this.sbw-this.span.offsetWidth) l=this.sbw-this.span.offsetWidth;
           if(t>this.sbh-this.span.offsetHeight) t=this.sbh-this.span.offsetHeight;
            //设置span的位置
            this.span.style.left=l+"PX"
            this.span.style.top=t+"PX"

            

            // 计算左边span移动的比例
            var x=l/(this.sbw-this.span.offsetWidth)
            var y=t/(this.sbh-this.span.offsetHeight)
            // console.log(x,y)

            //根据比例计算，大图要移动的距离
            this.bimg.style.left=-(this.bimg.offsetWidth-this.bbox.offsetWidth)*x+"px"
            this.bimg.style.top=-(this.bimg.offsetHeight-this.bbox.offsetHeight)*y+"px"
        }

        init(){
            //大图除大框  宽之比 得比例
            var blw=this.bimg.offsetWidth/this.bbox.offsetWidth
            //高之比
            var blh=this.bimg.offsetHeight/this.bbox.offsetHeight
            //得到span的宽 高  小盒除比例
            this.span.style.width=this.sbw/blw+"px"
            this.span.style.height=this.sbh/blh+"px"
            // console.log(this.span.style.Width,this.span.style.Height)
        }
        }        </script>

        </div>
        <!-- <label>购买数量：</label>
        <div class="s-i">

            <input type="button" class="number" id="dif" value="-">
        <input type="number" class="number-ipt">
        <input type="button" class="number" id="ad" value="+">
        </div> -->
<script src="js/spxq.js"></script>
</body>
</html>

 




